<template>
  <el-main>
    <el-tabs
      tab-position="left"
      v-model="activeTab"
    >
      <el-tab-pane
        label="歌单"
        name="song"
      >
        <el-card
          class="song"
          :body-style="{ padding: '0px' }"
          v-for="song in singerDetail.mysongs"
          :key="song"
        >
          <router-link :to="`/song/${song.id}`">
            <img src="../../assets/song.jpeg" />
          </router-link>
          <div class="info">
            <div>{{ song.name }} - {{ song.creator }}</div>
            <div class="price">{{ song.playprice }} 欢乐值</div>
            <div class="playnum">{{ song.playnum }}</div>
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane
        label="歌手信息"
        name="singer"
      >
        <el-row>
          <el-col
            :span="10"
            :offset="7"
          >
            <el-card :body-style="{ padding: '0px' }">
              <img src="http://p2.qhimgs4.com/t01884ea128faf3bec0.jpg" />
              <div class="info align-center">
                <div>{{ singerDetail.username }}</div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </el-main>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  name: 'Singer',
  mounted() {
    const uid = this.$route.params.id;
    this.getSinger(uid);
    this.uid = uid;
  },
  data() {
    return {
      uid: 0,
      activeTab: 'song',
      // songs: new Array(8).fill(1).map((it, index) => index),
    };
  },
  computed: {
    ...mapGetters([
      'singerDetail',
    ]),
  },
  methods: {
    ...mapActions([
      'getSinger',
    ]),
  },
};
</script>

<style scoped>
.song {
  float: left;
  width: 320px;
  margin: 10px;
}

/* 卡片图 */
img {
  width: 100%;
}

/* 卡片信息 */
.info {
  padding: 5px 10px;
  position: relative;
  color: #666;
}

/* 价格 */
.info .price {
  font-size: 1.4em;
  font-weight: bolder;
  color: #f16c6c;
  text-align: center;
}

/* 播放量 */
.info .playnum {
  position: absolute;
  right: 10px;
  top: 5px;
  color: #888;
}
</style>
